<script lang="ts" setup>
defineProps({
	datas: {
		type: Object as any,
	},
	title: {
		type: String,
	},
	creator: {
		type: String,
	},
});

// const statusConfig = ref<any>({
// 	1: '已处置',
// 	2: '已签收',
// 	0: '待处置',
// });
// //设置颜色
// const setColor = (type: Number) => {
// 	switch (type) {
// 		case 0:
// 			return 'wait-tag';
// 		case 2:
// 			return 'edit-tag';
// 		case 1:
// 			return 'agree-tag';
// 		default:
// 			break;
// 	}
// };

// 查看
const emit = defineEmits(['view']);
const handleView = (name: any, datas: any) => {
	emit('view', name, datas);
};

// 获取办理情况
const getExecuteContent = (datas: any) => {
	if (datas && datas.length > 0) {
		const data = datas.find((i: any) => i.fieldCode === 'executecont');
		return data.fieldValue ? data.fieldValue[0] : '';
	}
	return '';
};
</script>
<template>
	<div class="node" v-if="!datas.isLastTaskOrderLog">
		<div class="node-left">
			<div class="node-left-point"></div>
			<div class="node-left-line"></div>
		</div>
		<div class="node-right">
			<div class="title">
				<span>{{ datas.eventProcessName }}</span>
				<!-- <el-tag v-if="datas.isStart || datas.areaLevel" class="edit-tag">已签收</el-tag>
				<el-tag v-else :class="setColor(datas.logState)">{{ statusConfig[datas.logState] }}</el-tag> -->
			</div>
			<div class="time">{{ datas.createTime }}</div>
			<!-- 发起 -->
			<template v-if="datas.isStart">
				<div class="detail">
					<div class="detail-label">处置应用：</div>
					<div class="detail-value">{{ datas.sourceSystemCode }}</div>
				</div>
				<div class="detail">
					<div class="detail-label">提交人：</div>
					<div class="detail-value">{{ creator }}</div>
				</div>
				<div class="detail">
					<div class="detail-label detail-label2">上报事件单：</div>
					<div class="detail-value">
						{{ title }}
					</div>
				</div>
			</template>
			<template v-else>
				<!-- 自动节点 -->
				<template v-if="datas.areaLevel">
					<!-- <div class="detail">
						<div class="detail-label">处置应用：</div>
						<div class="detail-value">{{ datas.sourceSystemCode }}</div>
					</div> -->
					<div class="detail">自动派发</div>
				</template>
				<!-- 处理节点 -->
				<template v-if="!datas.areaLevel">
					<div class="detail">
						<div class="detail-label">处置应用：</div>
						<div class="detail-value">{{ datas.sourceSystemCode }}</div>
					</div>
					<div class="detail">
						<div class="detail-label detail-label1">处置主体：</div>
						<div class="detail-value">{{ datas.executeDept || datas.executor }}</div>
					</div>
					<div class="detail">
						<div class="detail-label">处置结果：</div>
						<div class="detail-value">
							<template v-if="datas.logState === 1">
								{{ getExecuteContent(datas.taskOrderOutputs) }}
								<span class="view-button" @click="handleView(datas.eventProcessName, datas.taskOrderOutputs)">查看</span>
							</template>
							<template v-else-if="datas.logState === 2"> 已退回 </template>
							<template v-else>未处置</template>
						</div>
					</div>
					<div class="detail">
						<div class="detail-label">处置时间：</div>
						<div class="detail-value" v-if="datas.logState === 1 || datas.logState === 2">{{ datas.executeTime }}</div>
					</div>
				</template>
			</template>
			<div class="children" v-if="datas.children && datas.children.length > 0">
				<process-node v-for="(item, index) of datas.children" :key="index" :datas="item" @view="handleView" />
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.node {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;

	&-left {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 100%;
		max-height: 145px;
		margin-top: 3px;

		&-point {
			width: 16px;
			height: 16px;
			background: #1989fa;
			border: 2px solid #1989fa;
			border-radius: 50px;
			opacity: 1;
		}

		&-line {
			width: 1px;
			height: 100%;
			background: #e5e7ed;
			border-radius: 4px;
		}
	}

	&-right {
		width: calc(100% - 32px);
		margin-bottom: 16px;
		margin-left: 32px;

		.title {
			margin-bottom: 4px;
			font-family: 'Microsoft YaHei';
			font-size: 16px;
			font-weight: 400;
			line-height: 22px;
			color: #303133;
			text-align: left;

			span {
				margin-right: 8px;
			}
		}

		.time {
			font-family: 'Microsoft YaHei';
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
			color: #303133;
			text-align: left;
		}

		.detail {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			font-family: 'Microsoft YaHei';
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
			color: #a8abb2;
			text-align: left;

			&-label {
				word-break: keep-all;
			}

			&-label1 {
				min-width: 60px;
			}

			&-label2 {
				word-break: keep-all;
			}

			.view-button {
				font-family: 'Microsoft YaHei';
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
				color: #1989fa;
				text-align: left;
				cursor: pointer;
			}
		}

		.children {
			margin-top: 16px;
		}
	}
}
</style>
